﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gramos - Admin Dashboard</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::dataTable -->
    <link rel="stylesheet" href="assets/vendors/dataTable/responsive.bootstrap.min.css" type="text/css">
    <!-- end::dataTable -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!--begin:上边菜单框 over-loader-menu.html-->
<div th:replace="../templates/menu/over-loader-menu :: menu"></div>
<!--end:上边菜单框 over-loader-menu.html-->

<!-- begin::side menu 侧边菜单列表 -->
<div th:replace="../templates/menu/list-menu :: menu"></div>
<!-- end::side menu 侧边菜单列表 -->


<!-- begin::main content 管理员信息表单-->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>Data Tables</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
                    <li class="breadcrumb-item"><a href="#">Tables</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Data Tables</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->

        <!--    管理员表单    -->
        <div class="card">
            <div class="card-body">
                <!--    分页+模糊查询操作   -->
                <div>
                    <form style="margin-bottom: 20px;display:inline-block;" role="form" id="form_query"
                          th:action="@{/queryUser}">
                        <input id="page" name="pn" type="hidden" value="1"/>
                        <div class="form-group" style="display: inline-block">
                            <input type="text" class="form-control" placeholder="管理员名称" name="search"
                                   style="width: 150px;margin-left: 20px" th:value="${search}">
                        </div>
                        <div class="form-group" style="display: inline-block">
                            <input type="text" class="form-control" placeholder="管理员状态" name="searchStatus"
                                   style="width: 150px;margin-left: 20px" th:value="${searchStatus}">
                        </div>
                        <button type="submit" style="display:inline-block;" class="btn btn-theme">搜索</button>
                    </form>
                    <button class="btn btn-theme" style="display:inline-block;margin-inline-start: 40%;"
                            onclick="location.href='queryUser';">刷新
                    </button>
                </div>
                <!--    分页+模糊查询操作   -->

                <table class="table-striped table-bordered" style="width: 100%">
                    <!--         表头           -->
                    <thead>
                    <tr>
                        <th>管理员ID</th>
                        <th>管理员名称</th>
                        <th>管理员密码</th>
                        <th>管理员状态</th>
                        <th>管理员创建时间</th>
                        <th>管理员个人信息</th>
                        <th></th>
                    </tr>
                    </thead>
                    <!--         表头           -->

                    <!--    表单主要内容    -->
                    <!--        "records":[{"id":0,"name":"admin","password":"123456","status":1,"createTime":"2021-11-19T22:26:40","personInfo":null}],
                    "total":1,"size":5,"current":1,"orders":[],"optimizeCountSql":true,"hitCount":false,"countId":null,"maxLimit":null,"searchCount":true,"pages":1-->
                    <tbody id="tbody">
                    <tr class="trClass" th:each="userItem : ${pageInfo.records}">
                        <td th:id="${userItem.id}" th:text="${userItem.id}"></td>
                        <td th:text="${userItem.name}"></td>
                        <td th:text="${userItem.password}"></td>
                        <td>
                            <span  th:if="${userItem.status}==0">禁用</span>
                            <span  th:if="${userItem.status}==1">正常</span>
                            <span  th:if="${userItem.status}==2">离职</span>
                        </td>
                        <td th:text="${userItem.createTime}"></td>
                        <td th:text="${userItem.personInfo}"></td>
                        <td>
                            <div class="dropdown">
                                <a href="#" class="btn btn-light btn-floating btn-icon btn-sm"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <button class="dropdown-item" type="button" onclick="onUpdate(this)">修改</button>
                                    <button class="dropdown-item" type="button" onclick="deleteUser(this)">注销</button>
                                    <button class="dropdown-item dimission" type="button" onclick=" onDimission(this)">离职</button>
                                    <button class="dropdown-item forbidden" type="button" onclick="onForbidden(this);">禁用</button>
                                </div>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                    <!--    表单主要内容    -->

                    <!--      添加新的管理员       -->
                    <tfoot>
                    <tr>
                        <th>
                            <button data-toggle="modal" href="#insertUserModal" type="button">
                                (+)
                            </button></th>
                    </tr>
                    </tfoot>
                    <!--    添加新的管理员     -->
                </table>
                <!-- 分页html标签-->
                <div class="card-body">
                    <nav aria-label="Page navigation example"
                         style="margin-left: 150px;">
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" href="#"
                                                     th:text="'当前页码：'+${pageInfo.current}+'【总'+${pageInfo.total}+'条记录，'+${pageInfo.current}+'/'+${pageInfo.pages}+'页】'">
                            </a></li>
                            <li class="page-item"><a class="page-link"
                                                     href="javascript:jumpPage(1)">首页</a></li>
                            <li class="page-item" th:if="${pageInfo.hasPrevious()}"><a class="page-link"
                                                                                         th:href="'javascript:jumpPage('+(${pageInfo.current}-1)+')'">上一页</a>
                            </li>
                            <li class="page-item"><a class="page-link"
                                                     th:href="'javascript:jumpPage('+${pageInfo.current}+')'"
                                                     th:text="${pageInfo.current}"></a>
                            </li>
                            <li class="page-item" th:if="${pageInfo.hasNext()}"><a class="page-link"
                                                                                     th:href="'javascript:jumpPage('+(${pageInfo.current}+1)+')'">下一页</a>
                            </li>
                            <li class="page-item"><a class="page-link"
                                                     th:href="'javascript:jumpPage('+${pageInfo.pages}+')'">尾页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!--    管理员表单    -->


        <!-- 添加管理员的请求方式为post    enctype="multipart/form-data"-->
        <div th:replace="../templates/menu/user/addUser-menu :: menu"></div>
        <!-- 添加管理员的请求方式为post    enctype="multipart/form-data"-->

        <!-- 修改管理员信息的请求方式为post    enctype="multipart/form-data"-->
        <div th:replace="../templates/menu/user/updateUser-menu :: menu"></div>
        <!-- 修改管理员信息的请求方式为post    enctype="multipart/form-data"-->

        <!-- 管理员离职的请求方式为post    enctype="multipart/form-data"-->
        <div th:replace="../templates/menu/user/dimission-menu :: menu"></div>
        <!-- 管理员离职的请求方式为post    enctype="multipart/form-data"-->

        <!-- 管理员禁用的请求方式为post    enctype="multipart/form-data"-->
        <div th:replace="../templates/menu/user/forbidden-menu :: menu"></div>
        <!-- 管理员禁用的请求方式为post    enctype="multipart/form-data"-->


    </div>

</main>
<!-- end::main content 管理员信息表单-->

<!-- begin::global scripts -->
<script src="assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::dataTable -->
<script src="assets/vendors/dataTable/jquery.dataTables.min.js"></script>
<script src="assets/vendors/dataTable/dataTables.bootstrap4.min.js"></script>
<script src="assets/vendors/dataTable/dataTables.responsive.min.js"></script>
<script src="assets/js/examples/datatable.js"></script>
<!-- end::dataTable -->

<!-- begin::custom scripts -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/app.js"></script>
<!-- end::custom scripts -->



<!--分页查询+模糊查询操作-->
<script>
    //这个是页面跳转的函数
    function jumpPage(page) {
        //要修改访问的页码
        document.getElementById("page").value = page;
        document.getElementById("form_query").submit();
    }
</script>
<!--分页查询+模糊查询操作-->

<!--显示修改模态框的函数 -->
<script>
    //定义一个显示修改模态框的函数  item为当前删除按钮的节点
    function onUpdate(item){
        //1、获取tr节点
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        console.log(trItem);
        //2、获取tr节点中的td的数据
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        var name = trChilds[3].innerText;
        var password = trChilds[5].innerText;
        var statusStr = trChilds[7].firstElementChild.innerText;
        var createTime = trChilds[9].innerText;
        var personInfo = trChilds[11].innerText;
        console.log(trChilds);//th:text也是一个子节点
        // console.log(id+name+password);
        //3、给模态框中的输入框赋值，进行显示[通过jq的选择器选中节点对象，然后对value赋值]
        $('#updateUser input:eq(0)').attr('value',id);
        $('#updateUser input:eq(1)').attr('value',name);
        $('#updateUser input:eq(2)').attr('value',password);
        $('#updateUser input:eq(3)').attr('value',statusStr);
        $('#updateUser input:eq(4)').attr('value',createTime);
        $('#updateUser input:eq(5)').attr('value',personInfo);
        //4、显示模态框
        $('#updateUserModal').modal();
    }
</script>
<!--显示修改模态框的函数-->

<!--显示离职模态框的函数 -->
<script>
    //定义一个显示修改模态框的函数  item为当前删除按钮的节点
    function onDimission(item){
        //1、获取tr节点
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        //2、获取tr节点中的td的数据
        var trChilds = trItem.childNodes;//所有td
        console.log(trChilds);
        var id = trChilds[1].innerText;
        var name = trChilds[3].innerText;
        // var fun = trChilds[13]
        //     .firstElementChild
        //     .firstElementChild.nextElementSibling
        //     .lastElementChild.previousElementSibling;

        $(".dropdown-item.dimission").hide();
        // $(fun).hide();
        // $(fun).show();
        console.log(id);//th:text也是一个子节点
        // console.log(id+name+password);

        //3、给模态框中的输入框赋值，进行显示[通过jq的选择器选中节点对象，然后对value赋值]
        $('#dimission input:eq(0)').attr('value',id);
        $('#dimission input:eq(1)').attr('value',name);
        //4、显示模态框
        $('#dimissionModal').modal();
    }
</script>
<!--显示离职模态框的函数-->

<!--显示禁用模态框的函数 -->
<script>


    //定义一个显示修改模态框的函数  item为当前删除按钮的节点
    function onForbidden(item){
        //1、获取tr节点
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        //2、获取tr节点中的td的数据
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        var name = trChilds[3].innerText;

        var trChilds = trItem.childNodes;//所有td
        var status = trChilds[7].firstElementChild.innerText;
        if (status === "禁用" ){
            $(".dropdown-item.forbidden").css("cursor", "not-allowed");
            // $('.modal-dialog.dorbiddenDiv').hide();
            alert("该管理员已被禁用！！！");
        }else {
            // console.log(id+name+password);
            //3、给模态框中的输入框赋值，进行显示[通过jq的选择器选中节点对象，然后对value赋值]
            $('#forbidden input:eq(0)').attr('value',id);
            $('#forbidden input:eq(1)').attr('value',name);
            //4、显示模态框
            $('#forbiddenModal').modal();
        }

    }
</script>
<!--显示禁用模态框的函数-->

<!--删除功能-->
<script>
    //定义一个删除的处理函数  第二种方法：page.parentNode.parentNode.remove();
    function deleteUser(item){
        var trItem = item.parentNode.parentNode.parentNode.parentNode;
        var trChilds = trItem.childNodes;//所有td
        var id = trChilds[1].innerText;
        //1、发起ajax请求，提交删除操作
        $.post('deleteUser',{"id":id},function(result){
            //2、删除成功则删除对应的节点
            if(result.isok==true){
                alert('删除成功');
                //跳转页面
                location.reload();
            }else{
                alert(result.message);
            }
        });
    }
</script>
<!--删除功能-->

</body>
</html>